<template>
	<div v-if="a==1">
		<div class="top">
			<div class="one">
				<span :class="{active:a==1}" @click="staff">员工</span>
				<span :class="{active:a==2}" @click="move">调课</span>
				<span :class="{active:a==3}" @click="change">换课</span>
			</div>
			<div class="two" v-if="a==1">
				<el-input v-model="filedname" placeholder="请输入申请人姓名" />
				<el-button class="searchBtn" type="info" :icon="Search" @click="staffSearch">搜索</el-button>
			</div>
		</div>
		<div class="part" v-if="a==1">
			<el-table :data="staffData" style="width: 100%" height="55vh">
				<el-table-column prop="loaId" label="编号" />
				<el-table-column prop="userName" label="申请人" />
				<el-table-column prop="typeName" label="请假类" />
				<el-table-column prop="content" label="请假原因" />
				<el-table-column prop="startTime" label="请假时间" />
				<el-table-column prop="num" label="天数" />
				<el-table-column prop="createTime" label="申请时间" />
				<el-table-column prop="adminName" label="审批人" />
				<el-table-column label="审批状态">
					<template #header>
						<el-dropdown @command="siftuser" trigger="click">
							 <span class="el-dropdown-link">
							      审批状态<el-icon class="el-icon--right"><arrow-down /></el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item command=3>全部</el-dropdown-item>
									<el-dropdown-item command=0>未审批</el-dropdown-item>
									<el-dropdown-item command=1>审批通过</el-dropdown-item>
									<el-dropdown-item command=2>审不通过</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
					<template #default = "score">
						<div style="color:#ff0000" v-if="score.row.status == 2">审批未通过</div>
						<div style="color:#6cac39" v-if="score.row.status == 1">审批通过</div>
						<div style="color:#999999" v-if="score.row.status == 0">未审批</div>
					</template>
					
				</el-table-column>
				<el-table-column label="操作" width="180px">
					<template #default = "score">
						<el-button class="onebtn" :disabled="score.row.status=='0'? false : true" @click="Pass">通过</el-button>
						<el-button class="twobtn" :disabled="score.row.status=='0'? false : true" @click="noPass">不通过</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				layout="prev,pager,next"
				:page-count="total"
				:page-size="pageSize"
				v-model:current-page="pageNum"	
				@current-change="changePage"
			></el-pagination>
		</div>
	</div>
	<reassignment v-if="a==2" @move="move" :a="a" @staff="staff" @change="change"></reassignment>
	<Changeclasses v-if="a==3" @move="move" :a="a" @staff="staff" @change="change"></Changeclasses>
</template>

<script setup lang="ts">
	import reassignment from '@/components/reassignment.vue'
	import Changeclasses from '@/components/Changeclasses.vue'
	import {Search,CirclePlus,ArrowDown} from '@element-plus/icons-vue'
	import {reactive,ref,onMounted} from 'vue'
	import {EmployeeApprovalList} from '@/api/zzx'
	let a=ref<number>(1)
	let filedname=ref<string>("")
	
	//分页
	const pageSize=4;
	let total=ref(0)
	let pageNum=ref(1);

	//审批搜索
	const siftuser=(command)=>{
		// status = command
		//pageNum.value = 1
		staffSearch(command);
	}
	
	//点击员工
	const staff=()=>{
		a.value=1;
	}
	//点击调课
	const move=()=>{
		a.value=2;
	}
	//点击换课
	const change=()=>{
		a.value=3;
	}
	
	//点击员工中搜索
	const staffSearch=async (v)=>{
		let data={
			pageIndex:pageNum.value,
			pageSize:pageSize,
			name:filedname.value
		}
		if(typeof v =="string"){
			data.status=v
		}
		
		let res = await EmployeeApprovalList(data)
		// console.log("搜索员工",res)
		staffData.value=res.data
		total.value=res.pageCount
	}
	
	
	//员工表格数据
	let staffData=ref()
	//调取员工列表
	const getStaffList=async ()=>{
		let res = await EmployeeApprovalList({
			pageIndex:pageNum.value,
			pageSize:pageSize
		})
		// console.log("员工审批列表",res)
		staffData.value=res.data
		total.value=res.pageCount
	}
	getStaffList()
	//点击通过
	const Pass=()=>{
		
	}
	//点击不通过
	const noPass=()=>{
		
	}
	//点击分页器
	const changePage=(page)=>{
		// console.log(page)
		pageNum.value=page;
		staffSearch()
	}
</script>

<style scoped lang="less">
	.top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.one{
			width: 16%;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: space-evenly
		}
		.active{
			font-size: 18px;
			color: #333333;
			font-weight: 600;
		}
		
	}
	.el-input{
		width: 205px;
		margin-right: 10px;
		border: none;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	/* 表格距顶部的距离 */
	.el-table{
		margin-top: 20px;
	}
	.el-table{
		--el-table-border-color:none;
		--el-table-borde:none;
		--el-table-bg-color:none !important;    
		--el-table-header-bg-color:#f3f8fd;
		--el-table-header-text-color:#333 !important
	}
	/* 表格间隙 */
	:deep(.el-table__body) {
		-webkit-border-vertical-spacing: 9px;
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	.onebtn{
		width: 50px;
		height: 30px;
		line-height: 30px;
		color: #fff;
		background: #6cac39;
		border: none;
		border-radius: 4px;
	}
	.twobtn{
		width: 52px;
		height: 30px;
		line-height: 30px;
		color: #fff;
		background: #ff0000;
		border: none;
		border-radius: 4px;
		margin-left: 5px;
	}
	// 分页样式
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
</style>